<%--
  Created by IntelliJ IDEA.
  User: 张国庆
  Date: 2019/9/10
  Time: 22:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>轮播图</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript">
        layui.use(["table", "layer", "form"], function () {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            table.render({
                elem: "#myTable",
                url: "banner/showPage",
                page: true,
                cols: [[
                    {title: "编号", field: "id"},
                    {title: "图片", field: "pic", templet:"#bannerUrl"},
                    {title: "姓名", field: "name"},
                    {title: "状态", field: "status", templet:"#statu"},
                    {title: "上传时间", field: "time"},
                    {title: "描述", field: "descr"},
                    {title: "操作", templet: "#cz"},
                ]]

            })
        })

        function deleteBanner(id) {
            layui.use(["table", "layer", "form"], function () {
                var table = layui.table;
                var layer = layui.layer;
                var form = layui.form;
                layer.confirm("确定删除这条数据吗？", function (data) {
                    $.ajax({
                        url: "banner/deleteBanner",
                        data: "id=" + id,
                        success: function (data) {
                            if (data.isDelete) {
                                layer.alert("删除成功", {time: 2000});
                            } else {
                                layer.alert("删除失败", {time: 2000});
                            }
                            table.reload("myTable");
                        }
                    })
                })
            })
        }

        function showOne(id) {
            $.ajax({
                url: "banner/showOne",
                data: "id=" + id,
                success: function (data) {
                    $("#id").val(data.id);
                    $("#name").val(data.name);
                    $("#status").val(data.status);
                    $("#time").val(data.time);
                    $("#descr").val(data.descr);
                    /* $("#pic").val(data.pic);*/
                }
            })
            $("#addSubMit").hide();
            $("#updateSubMit").show();
            layui.use(["table", "form", "layer"], function () {
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                layer.open({
                    title: "修改信息",
                    content: $("#addForm"),
                    type: 1
                })
            })
            layui.use(["table", "form", "layer"], function () {
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                form.on("submit(update)", function (data) {
                    $.ajax({
                        url: "banner/updateBanner",
                        data: data.field,
                        success: function (data) {
                            if (data.isUpdate) {
                                layer.alert("修改成功", {time: 2000});
                            } else {
                                layer.alert("修改失败", {time: 2000});
                            }
                            table.reload("myTable");
                        }
                    })
                })
            })
        }
        function add() {
            $("#id").val(0);
            $("#updateSubMit").hide();
            $("#addSubMit").show();
            layui.use(["table", "layer", "form"], function () {
                var table = layui.table;
                var layer = layui.layer;
                var form = layui.form;
                layer.open({
                    title: "添加轮播图",
                    content: $("#addForm"),
                    type: 1
                })
            })
        }
        //普通图片上传
        layui.use(['upload', 'layer','element','table'], function () {
            var element = layui.element;
            var $ = layui.jquery,upload = layui.upload;
            var layer = layui.layer;
            var table = layui.table;
            var uploadInst = upload.render({
                elem: '#test1'
                , url: 'banner/insertBanner'
                , data: {
                    //携带其他参数
                    name: function () {
                        //返回标签的value值
                        return $('#name').val();
                    }, status: function () {
                        return $("[name='status']:checked").val();
                    }, descr: function () {
                        return $('#descr').val();
                    }
                }
                //禁止文件上传组件自动上传
                , auto: false
                //绑定提交按钮,点击按钮时上传
                , bindAction: "#addSubMit"
                , choose: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#imgdemo1').attr('src', result); //图片链接（base64）
                    });

                }
                , done: function (res) {
                    layer.closeAll('page');
                    layer.alert(res.isInsert, {time: 3000});
                    table.reload('myTable')
                }

            })
        });

    </script>
    <style>
        .layui-table-cell {
            height: 36px;
            line-height: 36px;
        }
    </style>
   <script id="statu" type="text/html">
        {{#  if(d.status == 0){ }}
        不显示
        {{#  } else { }}
        显示
        {{#  } }}
    </script>
    <script id="bannerUrl" type="text/html">
        <img src="${pageContext.request.contextPath}{{= d.pic }}" alt="{{= d.pic }}">
    </script>
</head>
<body>
<button type="button" class="layui-btn" onclick="add()">
    <i class="layui-icon">&#xe608;</i> 添加
</button>
<table id="myTable"></table>
<div id="cz" style="display: none">
    <button type="button" class="layui-btn layui-btn-normal" onclick="showOne('{{d.id}}')">修改</button>
    <button type="button" class="layui-btn layui-btn-danger" onclick="deleteBanner('{{d.id}}')">删除</button>
</div>

<form id="addForm" style="display: none;padding: 15px" class="layui-form" enctype="multipart/form-data">
    <div class="layui-form-item" id="departmentId_div">
        <label class="layui-form-label">编号</label>
        <div class="layui-input-block">
            <input name="id" id="id" class="layui-input" readonly/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片名字</label>
        <div class="layui-input-block">
            <input name="name" id="name" class="layui-input" placeholder="请输入图片名字" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选择要上传图片</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo1">
                <p id="demoText"></p>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选择图片的状态</label>
        <div class="layui-input-block">
            <%--<input type="checkbox" id="status" name="status" lay-skin="switch" lay-text="显示|不显示">--%>
                <input type="radio" name="status" value="0" title="不显示">
                <input type="radio" name="status" value="1" title="显示" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-block">
            <input type="text" name="descr" id="descr" class="layui-input" placeholder="" />
        </div>
    </div>
    <div class="layui-form-item">
        <button  type="button" lay-submit lay-filter="adds" class="layui-btn" id="addSubMit">添加</button>
        <button  type="button" lay-submit lay-filter="update" class="layui-btn" id="updateSubMit">修改</button>
        <button  type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>


</body>
</html>
